<template>
  <div class="dashboard-container">
    <h2>仪表盘</h2>
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-info">
          <p>总用户数</p>
          <h3>{{ totalUsers }}</h3>
        </div>
        <el-icon class="stat-icon"><User /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-info">
          <p>总订单数</p>
          <h3>{{ totalOrders }}</h3>
        </div>
        <el-icon class="stat-icon"><ShoppingCart /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-info">
          <p>今日访问量</p>
          <h3>{{ todayVisits }}</h3>
        </div>
        <el-icon class="stat-icon"><Eye /></el-icon>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-info">
          <p>转化率(%)</p>
          <h3>{{ conversionRate }}</h3>
        </div>
        <el-icon class="stat-icon"><TrendingUp /></el-icon>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { User, ShoppingCart, View, ChatLineSquare } from '@element-plus/icons-vue'
import axios from '@/utils/axios'

const totalUsers = ref(0)
const totalOrders = ref(0)
const todayVisits = ref(0)
const conversionRate = ref(0)

onMounted(async () => {
  try {
    const res = await axios.get('/api/dashboard')
    const data = res.data
    totalUsers.value = data.totalUsers
    totalOrders.value = data.totalOrders
    todayVisits.value = data.todayVisits
    conversionRate.value = data.conversionRate
  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
  }
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-info {
  flex: 1;
}

.stat-info p {
  color: #64748b;
  margin: 0 0 10px 0;
}

.stat-info h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.stat-icon {
  width: 40px;
  height: 40px;
  color: #3b82f6;
}
</style>